<template>
  <a-card :bordered="false">
    <h3>{{taskName}}</h3>
    <MarketingFilter :type="5" @onExport="onExport" @onSearch="onSearch"></MarketingFilter>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="awardInfo" slot-scope="record">
        <a @click="handleShowVoucherBases(record)">{{record.awardInfo}}</a>
      </span>
      <span slot="finishPercent" slot-scope="record">
        {{record.finishPercent}}%
      </span>
      
    </s-table>
    <a-modal class="writeOff-details" :visible="visible" width="500px" :footer="null" @cancel="visible=false">
      <p v-if="writeOffList.length">已核销奖券：</p>
      <p v-for="(item, index) in writeOffList" :key="index">{{item.insertSource}}</p>
      <p v-if="noWriteOffList.length">未核销奖券：</p>
      <p v-for="(item, index) in noWriteOffList" :key="index">{{item.insertSource}}</p>
    </a-modal>
  </a-card>
</template>
<script>
import { taskManagerDetailList, detailListExport } from '@/api/micromall/communityMarketing'
import { STable } from '@/views/box/components'
import MarketingFilter from '../../components/MarketingFilter'
import { releaseColumns, newColumns, rewardColumns } from '../marketingManagement/taskDetailsList.js'

export default {
  components: {
    MarketingFilter,
    STable
  },
  data() {
    return {
      writeOffList: [],
      noWriteOffList: [],
      taskName: this.$route.query.taskName,
      visible: false,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize,
          id: this.$route.params.id
        }
        return taskManagerDetailList(data).then(res => {
         if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {},
  computed: {
    columns() {
      const type = this.$route.query.taskType
      let columns;
      switch (type) {
        case '2':
          // 导购发帖任务
          columns = releaseColumns
          break
        case '1':
          // 导购拉新任务
          columns = newColumns
          break
        case '3':
          // 用户首帖任务奖励
          columns = rewardColumns
          break
      }
      return columns
    }
  },
  mounted() {},
  watch: {},
  methods: {
    handleShowVoucherBases(item) {
      const { voucherBases } = item
      this.writeOffList = voucherBases.filter(e => (e.visValid == 'Y' && e.bisValid == 'Y'))
      this.noWriteOffList = voucherBases.filter(e => (e.visValid != 'Y' || e.bisValid != 'Y'))
      this.visible = true
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    },

    // 导出
    onExport() {
      window.location.href = detailListExport + `?taskType=${this.$route.query.taskType}`
    }
  }
}
</script>
<style lang="less" scoped>
.writeOff-details p{
  text-align: center;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

.img {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
</style>
